.mask {
	position: absolute;
	inset: 0;
	background-color: rgba(#000000, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	&.hiden {
		display: none;
	}
	.user-setting-warp {
		width: 100%;
		height: auto;
		.drawer-user-setting {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 20px 20px 50px 20px;
			background-color: #fff;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			transform: translateY(100%);
			transition: transform 0.3s;
			height: 270px;
			overflow-y: scroll;
			&.load {
				transform: translateY(0%);
			}
			.settings {
				width: 100%;
				padding: 10px;
				border-radius: 10px;
				background-color: #efefef;
				.item {
					padding: 0 10px;
					display: flex;
					align-items: center;
					gap: 10px;
					width: 100%;
					height: 100px;
					&:not(:last-of-type) {
						border-bottom: 1px solid #dedede;
					}
					Image {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
	.input-for-rename {
		position: absolute;
		bottom: 0;
		width: calc(100% - 20px);
		height: 100px;
		margin: 0 10px;
		border-radius: 20px;
		background-color: #fff;
		transform: translateY(-290px) translateX(calc(-100% - 20px));
		transition: transform 0.2s;
		z-index: 0;
		&.load {
			transform: translateY(-290px) translateX(0);
		}
		Input {
			width: 100%;
			height: 100%;
			padding: 0 20px;
			box-sizing: border-box;
		}
	}
}
